<template>
  <div class="app-container" v-loading="loadingBtn">
        <levelbar></levelbar>
         <el-form label-width="150px"  class="app-content" :rules="rules" :model="dataForm" ref="dataForm">
          <!-- 添加学校通知 -->
            <div class="box" v-if="!($route.params.id&&$route.params.status=='1')">
                <div class="form-title">{{$route.params.status=='2'?'编辑学校通知':'添加学校通知'}}</div>
                <div class="form-box">
                        <el-row :gutter="41">
                            <el-col :span="14">
                                <el-form-item label="通知名称" prop="name">
                                   <el-popover placement="top-start" trigger="focus" content="字符长度不大于32位">
                                       <el-input v-model="dataForm.name" placeholder="请输入通知名称" :maxlength="32" slot="reference"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <div class="form-item">
                            <div class="form-item-title">
                                <span class="title-level">&nbsp;&nbsp;通知图片
                                    <span class="warn-title">(支持 JPG PNG GIF 格式，2M以内的图片！)</span>
                                </span>
                            </div>
                            <div class="form-content" :class="{'upload-image-max': imgOptions.fileListMaxLen }">
                                <el-row :gutter="41">
                                    <el-col :span="24" class="upload-image">
                                          <div class="img-box">
                                                <el-form-item label="">
                                                    <fileUpload 
                                                    :imgSize="2"
                                                    @remove="fileImgRemove" 
                                                    :isMultiple="imgOptions.isMultiple"
                                                    :file-list.sync="imgOptions.fileList" 
                                                    :file-list-show.sync="imgOptions.fileListShow" 
                                                    :list-type="imgOptions.listType"
                                                    :up-file-type="imgOptions.upFileType"
                                                    :accept-list="imgOptions.accept"
                                                    @onSuccess="onSuccess"
                                                    @fileMaxLen="fileMaxLen"
                                                    @fileChange="fileChange"
                                                    >
                                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                                </fileUpload>
                                                </el-form-item>
                                          </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-title schoolNotice">
                              <el-row >
                                  <div class="title-level"><font color="red">*</font>&nbsp;
                                     <span class="school-notice">填入学校通知内容</span>
                                     <el-checkbox v-model="dataForm.checked">置顶</el-checkbox>
                                  </div>
                              </el-row>
                            </div>
                            <el-row :gutter="41">
                              <el-col :span="14">
                                  <el-form-item label=""  prop="content">
                                    <el-input :maxlength="1200"
                                        type="textarea"
                                        :rows="5"
                                        placeholder="请输入内容,最多1200字"
                                        v-model="dataForm.content">
                                      </el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                        </div>
                        <div class="form-item">
                            <div class="form-item-title schoolNotice">
                              <el-row >
                                  <div class="title-level"><font color="red">*</font>&nbsp;
                                     <span class="school-notice">选择APP发布范围</span>
                                  </div>
                              </el-row>
                            </div>
                             <el-row :gutter="41">
                              <el-col :span="14">
                                  <tree class="tree-box" :getTreeList="getClassTreeList"  @getIdList="getlistClassId"
                                  :defaultExpanded='defaultExpanded' :defaultChecked='defaultAppChecked'></tree>
                              </el-col>
                            </el-row>
                        </div>
                        <div class="form-item">
                             <el-form-item label="是否同步至班牌">
                                <el-radio-group v-model="dataForm.sameStep">
                                    <el-radio label="0">是</el-radio>
                                    <el-radio label="1">否</el-radio>
                                </el-radio-group>
                             </el-form-item >
                            <div v-if="dataForm.sameStep=='0'" class="tong-bu">
                                <div class="title-level" style="padding-left:136px"><font color="red">*</font>&nbsp;
                                     <span class="school-notice">请选择发布范围</span>
                                </div>
                                <el-row :gutter="41">
                                    <el-col :span="14">
                                        <tree class="tree-box" :getTreeList='getWisdomClassTreeList' @getIdList='getWisdomClassId' 
                                        :defaultExpanded='defaultExpanded' :defaultChecked='defaultWisChecked'></tree>
                                    </el-col>
                                </el-row>
                                <p class="show-time">全屏显示时段：</p>
                                <el-row class="tree-box">  
                                    <el-col :span="6">
                                          <el-form-item label-width="0px" prop="startDate">
                                            <el-date-picker v-model="dataForm.startDate" :editable="false" type="datetime" format="yyyy-MM-dd HH:mm:ss" 
                                            placeholder="选择开始时间" @change="dateChange1" :picker-options="dataForm.pickerOptions1" style="width:100%"></el-date-picker>
                                          </el-form-item>
                                    </el-col>
                                    <el-col :span="2" align="center" class="lineH">至</el-col>
                                    <el-col :span="6">
                                        <el-form-item label-width="0px" prop="endDate">
                                        <el-date-picker v-model="dataForm.endDate" :editable="false" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                         placeholder="选择结束时间" @change="dateChange2" :picker-options="dataForm.pickerOptions2" style="width:100%"></el-date-picker>
                                        </el-form-item>
                                    </el-col> 
                                </el-row>   
                            </div>
                        </div>
                        <el-form-item class="footer">
                            <el-button @click="resetForm">取消</el-button>
                            <el-button type="primary" @click="submitForm('dataForm')" >保存</el-button>
                        </el-form-item>
                </div>
            </div>
            <!-- 查看学校通知 -->
            <div class="box" v-if="$route.params.id&&$route.params.status=='1'">
                <div class="form-title">查看学校通知</div>
                <div class="form-box">
                        <el-row :gutter="41">
                            <el-col :span="14">
                                <el-form-item label="通知名称：" label-width="120px">
                                    <span>{{dataForm.name}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <div class="form-item">
                            <div class="form-content">
                                <el-row :gutter="41" v-if="getPic.length">
                                    <el-col :span="24" class="upload-image">
                                        <el-form-item>
                                            <div v-for="(item,index) in getPic" :key="index" class="img-infor-show img-infor-check">
                                                <span>通知图片{{index+1}}：</span>
                                                <img class="avatar" :src="item">
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <el-row :gutter="41">
                            <el-col :span="14">
                                <el-form-item label="上线时间：" label-width="120px">
                                    <span style="display:inline-block;padding-left:5px">{{dataForm.uploadTime?dataForm.uploadTime:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="form-item">
                            <div class="form-item-title schoolNotice">
                              <el-row>
                                    <el-form-item label="学校通知内容：" label-width="120px">
                                            <el-checkbox v-model="dataForm.checked" :disabled="true">置顶</el-checkbox>
                                     </el-form-item>
                              </el-row>
                            </div>
                            <el-row :gutter="41">
                              <el-col :span="14">
                                    <div class="dataForm-content check-dataForm-content">
                                        {{dataForm.content}}
                                    </div>
                              </el-col>
                            </el-row>
                        </div>
                         <div class="form-item">
                            <div class="form-item-title schoolNotice">
                              <el-row >
                                  <div class="title-level">
                                     <span class="school-notice">APP发布范围：</span>
                                  </div>
                              </el-row>
                            </div>
                             <el-row :gutter="41">
                              <el-col :span="14">
                                  <tree class="tree-box" style="margin-left: 120px"
                                   :getTreeList="getClassTreeList"  @getIdList="getlistClassId"
                                  :defaultExpanded='defaultExpanded' :defaultChecked='defaultAppChecked'></tree>
                              </el-col>
                            </el-row>
                        </div>
                        <div class="form-item">
                             <el-form-item label="是否同步至班牌：" label-width="124px">
                                    <span>{{dataForm.sameStep=='0'?'是':dataForm.sameStep=='1'?'否':'--'}}</span>
                             </el-form-item >
                            <div v-if="dataForm.sameStep=='0'" class="tong-bu">
                                <div class="title-level" style="padding-left:124px">
                                     <span class="school-notice">发布范围</span>
                                </div>
                                <el-row :gutter="41">
                                    <el-col :span="14">
                                        <tree class="tree-box" style="margin-left: 124px;" 
                                        :getTreeList='getWisdomClassTreeList' @getIdList='getWisdomClassId' 
                                        :defaultExpanded='defaultExpanded' :defaultChecked='defaultWisChecked'></tree>
                                    </el-col>
                                </el-row>
                                <p class="show-time" style="padding-left: 123px;">全屏显示时段：
                                    <span v-if="dataForm.startDate&&dataForm.endDate">{{dataForm.startDate}} 至 {{dataForm.endDate}}</span>
                                    <span v-else>--</span>
                                </p>
                            </div>
                        </div>
                        <el-form-item class="footer">
                            <el-button @click="resetForm('dataForm')">返回</el-button>
                        </el-form-item>
                </div>
            </div>
           
        </el-form>
  </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import fileUpload from 'components/Upload/fileUpload';
import {saveSchoolNews, getSchoolNewsById, updateSchoolNews, getClassTree, getWisdomClassTree} from 'api/schoolNotice';
import tree from 'components/tree';
import { mapState, mapGetters } from 'vuex';
import moment from 'moment';
export default {
    name: 'noticeUpdata',
    components: { Levelbar, fileUpload, tree},
    data() {
        var validate = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入通知内容'));
            } else if (value.match(/^\s+$/)) {
                callback(new Error('请输入通知内容'));
            } else {
                callback();
            }
        };
        var validStart = (rule, value, callback) => {
            if (!value&&this.dataForm.endDate) {// 没有开始时间 只有结束时间
                return callback(new Error('请输入开始时间'));
            }
            if (value&&!this.dataForm.endDate) {
                callback()
            }
            callback()
        };
        var validEnd = (rule, value, callback) => {
            if (this.dataForm.startDate&&!value) {
                return callback(new Error('请输入结束时间'));
            }
            if (this.dataForm.startDate && value) {
                if (value <= this.dataForm.startDate) {
                    return callback(new Error('结束时间必须大于开始时间'));  
                }
            }
            if (!this.dataForm.startDate&&!value) {
                callback()
            }
            callback()
        };
        return {
            defaultExpanded: [], // 默认展开的树
            defaultAppChecked: [], // 默认选中的
            defaultWisChecked: [], // 默认选中的
            loadingBtn: true, // 查看页面的loading
            dataForm: {
                sameStep: '1', // 是否同步 默认否1
                name: '',
                checked: false,
                imageUrl: '',
                content: '',
                startDate: '', // 开始时间
                endDate: '', // 结束时间
                pickerOptions1: {},
                pickerOptions2: {},
                pictureUrl: ''// 传给后台的图片
            },
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: [],
                isMultiple: true,
                imageInfor: [],
                fileListMaxLen: false // 是否达最大上传量(控制添加按钮显示)
            },
            getClassTreeList: [], // app树的信息
            getWisdomClassTreeList: [], // 班牌的树的信息
            getAppClassNum: 0, // app全部班级数量 当选择全校时listClassId=getAppClassNum发给后台[]
            listClassId: [], // app选择的班级 给后台
            classIdList: [], // 班牌选择的班级 给后台
            getPic: [],
            getDetailArrPic: [], // 图片信息数组(回填的)
            rules: {
                name: [
                    { required: true, message: '请输入通知名称', trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur'}
                ],
                content: [
                    { required: true, message: '请输入通知内容', trigger: 'blur'},
                    { validator: validate, trigger: 'blur' }
                ],
                startDate: [
                    { type: 'date', validator: validStart, trigger: 'change'}
                ],
                endDate: [
                    { type: 'date', validator: validEnd, trigger: 'change'}
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid',
            'schoolName',
            'schoolId'
        ])
    },
    created() {
        this.checkUpdateFun();// 查看或者 编辑时执行
        this.addFun();// 是添加操作时执行
    },
    methods: {
        checkUpdateFun() {// 查看或者 编辑时执行
            if (this.$route.params.status=='1'||this.$route.params.status=='2') {// 1查看  2编辑
                this.updateOrcheck().then(() => {
                    this.getClassTree();// // 获取app班级树状图
                    this.getWisdomClassTree();// // 获取班牌班级树状图
                })
            }
        },
        addFun() {// 添加操作
            if (!this.$route.params.status) {// 添加学校通知
                this.getClassTree();// // 获取app班级树状图
                this.getWisdomClassTree();// // 获取班牌班级树状图
            }
        },
      
        getlistClassId(data) {// 获取app被选班级数组 只要班级id数组
            this.listClassId=data;
        },
        getWisdomClassId(data) {// 获取班牌的被选班级数组
            this.classIdList=data;
        },
        getWisdomClassTree() {// 获取班牌的班级信息
            getWisdomClassTree(this.schoolId).then((res) => {
                this.loadingBtn=false;
                let dis=false;
                if (this.$route.params.status=='1') {// 查看
                    dis=true;// 树被禁用掉 不可以操作
                }
                this.defaultExpanded=[this.schoolId]// 默认全校班级是展开状态
                if (res.data.content.length) {
                    res.data.content.forEach((item, index) => {
                        let children=[];
                        if (item.classList) {
                            item.classList.forEach((element) => {
                                children.push({
                                    id: element.pId,
                                    disabled: dis,
                                    label: element.sNickName
                                })
                            })
                            if(item.gradeId){ //有年级，就是普通学校 非培训机构 把班级 放在对应的年级下
                                this.getWisdomClassTreeList.push({
                                    id: item.gradeId,
                                    label: item.gradeName,
                                    disabled: dis,
                                    children
                                })
                            }else{//直接把班级 放在全校下
                                 this.getWisdomClassTreeList.push(children[0]);
                            }
                        }
                        
                    })
                    this.getWisdomClassTreeList=[{ 
                        id: this.schoolId,
                        label: '全校班级',
                        disabled: dis,
                        children: [...this.getWisdomClassTreeList]
                    }]
                }
            }).catch(() => {
                this.loadingBtn=false;
            })
        },
        getClassTree() {// 获取app的班级信息
            getClassTree(this.schoolId).then((res) => {
                this.getClassTreeList=[];
                this.loadingBtn=false;
                let dis=false;
                if (this.$route.params.status=='1') {// 查看
                    dis=true;// 树被禁用掉 不可以操作
                }
                this.defaultExpanded=[this.schoolId]// 默认全校班级是展开状态
                if (res.data.content.length) {
                    res.data.content.forEach((item, index) => {
                        let children=[];
                        if (item.classList) {
                            item.classList.forEach((element) => {
                                this.getAppClassNum++;// app全部班级数目
                                children.push({
                                    id: element.pId,
                                    disabled: dis,
                                    label: element.sNickName
                                })
                            })
                            if(item.gradeId){ //有年级，就是普通学校 非培训机构 把班级 放在对应的年级下
                               this.getClassTreeList.push({
                                    id: item.gradeId,
                                    label: item.gradeName,
                                    disabled: dis,
                                    children
                               })
                            }else{//直接把班级 放在全校下
                                 this.getClassTreeList.push(children[0]);
                            }
                        }
                    })
                    this.getClassTreeList=[{ 
                        id: this.schoolId,
                        label: '全校班级',
                        disabled: dis,
                        children: [...this.getClassTreeList]
                    }]
                }
            }).catch(() => {
                this.loadingBtn=false;
            })
        },
      
        // 添加或者编辑通知
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (this.getDetailArrPic.length>9) {
                    this.$message.info('最多上传9张图片！');
                    return;
                }
                if (this.imgOptions.fileListShow==false) {
                    return 
                }
                if (this.imgOptions.fileListMaxLen==true) {// 是否达到最大上传量
                    // console.log()
                }
                if (!this.listClassId.length) {
                    this.$message.info('请选择APP发布范围！');
                    return
                }
                if (this.dataForm.sameStep=='0') {// 同步至班牌 0 是同步
                    if (!this.classIdList.length) {
                        this.$message.info('请选择同步至班牌的发布范围！');
                        return
                    }
                }
                if (valid) {
                    if (!this.$route.params.id) {// 保存
                        this.saveSchoolNews();
                    }
                    if (this.$route.params.status=='2') {// 编辑
                        this.updateSchoolNews();
                    }
                } else {
                    return false;
                }
            });
        },
        updateOrcheck() {// 回填信息
            let json={
                id: this.$route.params.id
            }
            return getSchoolNewsById(json).then(res => {
                this.dataForm.name=res.data.content.name;
                this.dataForm.uploadTime=res.data.content.uploadTime;
                this.dataForm.checked=res.data.content.stick=='1'?true:false;
                this.dataForm.content=res.data.content.content;
                if (res.data.content.pic) {
                    this.getPic=res.data.content.pic.split(';');// 图片列表
                } else {
                    this.getPic=[]
                }
                this.dataForm.startDate=res.data.content.startTime?moment(res.data.content.startTime).format('YYYY-MM-DD HH:mm:ss'):'';  
                this.dataForm.endDate=res.data.content.endTime?moment(res.data.content.endTime).format('YYYY-MM-DD HH:mm:ss'):'';  
                this.defaultAppChecked=res.data.content.listClassId;// 已经选择的app班级
                this.defaultWisChecked=res.data.content.classIdList;// 已经选择的班牌班级
                this.dataForm.sameStep=res.data.content.same;// 是否同步
                this.listClassId=res.data.content.listClassId;// 发给后台的选择的app班级
                this.classIdList=res.data.content.classIdList;// 发给后台的选择的班牌班级

                if (this.$route.params.status=='2') {// 编辑
                    this.imgOptions.fileList=[];
                    let getDetailArr=[];
                    if (this.getPic.length) {
                        this.getPic.forEach((val, index) => {
                            this.imgOptions.fileList.push({name: index, url: val});
                            this.getDetailArrPic.push({name: index, url: val});
                            getDetailArr.push(val);
                        })
                    }
                    this.dataForm.pictureUrl =getDetailArr.join(';');// 给后台的src参数
                    if (this.getDetailArrPic.length<9) {
                        this.imgOptions.fileListMaxLen=false;
                    } else {
                        this.imgOptions.fileListMaxLen=true;
                    }
                }
            }).catch(() => {
                this.loadingBtn=false
            })
        },
        // 添加学校通知
        saveSchoolNews() {
            this.loadingBtn=true;
            let listClassId=this.listClassId.length==this.getAppClassNum?[]:this.listClassId, // app全部班级
                classIdList=this.classIdList, // 班牌班级
                startTime=this.dataForm.startDate?moment(this.dataForm.startDate).format('YYYY-MM-DD HH:mm:ss'):'', // 班牌开始时间
                endTime=this.dataForm.endDate?moment(this.dataForm.endDate).format('YYYY-MM-DD HH:mm:ss'):'', // 班牌开始时间
                same=this.dataForm.sameStep;// 是否同步（0同步1不同步）
            let schoolId=this.schoolId,
                name=this.dataForm.name,
                pic=this.dataForm.pictureUrl,
                content=this.dataForm.content,
                stick=this.dataForm.checked==false?'0':'1';// 是否置顶（1置顶0不置顶）
            saveSchoolNews(listClassId, classIdList, startTime, endTime, same, schoolId, name, pic, content, stick).then(res => {
                this.$store.dispatch('UpdateCache'); // 整页刷新
                this.loadingBtn=false;
                this.$message.success('添加成功！')
                this.$router.push({path: '/schoolNotice'})
            }).catch(() => {
                this.loadingBtn=false;
            })
        },
         // 编辑学校通知
        updateSchoolNews() {
            this.loadingBtn=true;
            let listClassId=this.listClassId.length==this.getAppClassNum?[]:this.listClassId, // app全部班级
                classIdList=this.classIdList, // 班牌班级
                startTime=this.dataForm.startDate?moment(this.dataForm.startDate).format('YYYY-MM-DD HH:mm:ss'):'', // 班牌开始时间
                endTime=this.dataForm.endDate?moment(this.dataForm.endDate).format('YYYY-MM-DD HH:mm:ss'):'', // 班牌开始时间
                same=this.dataForm.sameStep;// 是否同步（0同步1不同步）
            let schoolId=this.schoolId,
                id=this.$route.params.id,
                name=this.dataForm.name,
                pic=this.dataForm.pictureUrl,
                content=this.dataForm.content,
                stick=this.dataForm.checked==false?'0':'1';
            updateSchoolNews(listClassId, classIdList, startTime, endTime, same, id, schoolId, name, pic, content, stick).then(res => {
                this.$store.dispatch('UpdateCache', true); // 列表刷新
                this.loadingBtn=false;
                this.$message.success('编辑成功！')
                this.$router.push({path: '/schoolNotice'})
            }).catch(() => {
                this.loadingBtn=false;
            });
        },
        fileMaxLen(istrue) {
            this.imgOptions.fileListMaxLen=istrue;
        },
        fileChange(fileListLen) {
            if (fileListLen<9) {
                this.imgOptions.fileListMaxLen=false;
            }
        },
        dateChange1(date) {
            this.dataForm.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },
    // 功能：结束日期选择
        dateChange2(date) {
            this.dataForm.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },
        resetForm() {
            this.$router.push({path: '/schoolNotice'})
        },
        // 移除图片
        fileImgRemove(file) {
            this.imgOptions.fileListShow=true;
            this.getDetailArrPic.forEach((val, index) => {
                let accessUrl='';
                if (file.response) {
                    accessUrl=file.response.content.accessUrl
                } else {
                    accessUrl=file.url
                }
                if (val.url==accessUrl) {// 当前删除的那个
                    this.getDetailArrPic.splice(index, 1)
                }
                let getDetailArr=[];
                this.getDetailArrPic.forEach((val, index) => {
                    getDetailArr.push(val.url);
                });
                this.dataForm.pictureUrl =getDetailArr.join(';');// 给后台的src参数
            });
            if (this.getDetailArrPic.length<9) {
                this.imgOptions.fileListMaxLen=false;
            }
        },
         // 上传图片成功后获取图片路径
        onSuccess(data) {
            this.imgOptions.fileListShow=true;
            this.getDetailArrPic.push({name: data.fileName, url: data.accessUrl});// 发给后台的src 数组
            let getDetailArr=[];
            this.getDetailArrPic.forEach((val, index) => {
                getDetailArr.push(val.url);
            });
            this.dataForm.pictureUrl =getDetailArr.join(';');// 给后台的src参数
            if (this.getDetailArrPic.length >= 9) {
                this.imgOptions.fileListMaxLen=true;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
   
    .form-item-title{
        display: inline-block;
        width:200px;
       
    }
    .img-infor-show{
       position:relative;
        width:780px !important;
        vertical-align:text-top;
      span{
          display:inline-block;
          position:absolute;
          top:4px;
          left:-80px;
          color:#333;
      }
      img{
        display:inline-block;
        max-width: 700px;
        max-height: 700px;
        position: relative;
        left:-28px;
      }
    }
    .img-infor-check{
        margin-bottom:20px;
        span{
            font-size:14px;
            color: #666;
            top:-12px;
            left:-120px;
        }
    }
    .schoolNotice{
      width:150px;
      .title-level{
        width:230px;
        padding-left:12px;
      }
    }
    .box {
        padding:0 50px;
            background: #fff;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
                margin-bottom:40px;
            }
            .footer{
                padding:80px 0px 40px;
                position: relative;
                left:-50px;
                text-align: center;
            }
        }
         .upload-image {
             display: block;
            .avatar-uploader .el-upload {
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #20a0ff;
            }
        }
      
        .title-level{
            padding-left:20px;
            display: inline-block;
            text-align: left;
            vertical-align: middle;
            font-size: 14px;
            color: rgb(106, 85, 72);
            line-height: 1;
            padding: 11px 12px 11px 0;
            box-sizing: border-box;
            width: 700px;
            padding-left: 72px;
            .warn-title{
              color:#ccc;
            }
        }
        .img-box{
            width:600px;
        }
    .check-title-level{
        width:120px;
        text-align: right;
    }    
    .dataForm-content{
        border:1px solid #ccc;
        min-height: 80px;
        margin-left:160px;
        padding:10px;
    }
    .check-dataForm-content{
         margin-left:120px;
         word-wrap: break-word;
         word-break: normal; 
    }
    .school-notice{
        padding-right:10px;

    }
}
.tree-box{
    margin-left:150px;
    margin-bottom: 20px;
    .lineH{
        line-height: 36px;
        font-size:14px;
    }
}
.show-time{
    color: #666;
    padding-left:150px;
    font-size:14px;
    margin: 20px 0 16px 0;
    span{
        color:#333;
    }
}
</style>

